<template>

    <el-container>
    <el-aside width="200px" class="leftBar">
      <LeftBar/>
    </el-aside>

    <el-main>
      <!-- 数据展示和学习 -->
      <div class="learn">
        <div> <test/></div>
        <div> <jindu/></div>
      </div>

      <!-- 选择模型 -->
      <div style="margin-top: 3%;">
        <ModelMain />
      </div>
    </el-main>
    </el-container>

</template>

<script setup>
import LeftBar from "@/components/LeftBar.vue";
import  test from "@/components/Learn/header.vue";
import jindu from "@/components/Learn/jindu.vue";
import ModelMain from "@/components/Learn/model/modelMain.vue";
import {computed, ref} from "vue";
import router from "@/router";

// 监听路由交互
const animation = ref('slide');
computed(() =>{})
router.afterEach((to, form) => {
  if(to.meta.index > form.meta.index){
    animation.value = 'slide-left'
  }else{
    animation.value = 'slide-right'
  }
})
</script>

<style scoped>
.leftBar{
  /*border: 1px solid forestgreen;*/
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  margin-left: 3%;
  height: 800px;
}
.learn{
  left: auto;
  margin-left: 5%;
}
</style>
